<template>
    <myDialog :visible="popupFlag">
        <div style="padding: 70px 0;">
            <div class="main" @click.stop style="position: relative;">
                <div class="header flex">
                    <div class="title_box flex">
                        <img src="../../assets/fileFlow_label.png" style="margin-right: 10px;">
                        <p>打印批阅卡</p>
                    </div>
                    <el-icon @click="clear">
                        <Close />
                    </el-icon>
                </div>
                <div id="printMain" ref="print">
                    <div id="print-area">
                        <!-- <el-watermark color="#000" fontSize="15px" rotate="-45" content="河北正定中学" :gap="[50, 50]" zIndex="0"> -->
                            <table class="review-table">
                                <thead>
                                    <tr>
                                        <td colspan="7" class="title"
                                            style="height:50px !important;text-align: center; ">
                                            来文批阅卡</td>
                                    </tr>
                                    <tr>
                                        <td colspan="7" class="doc-number" style="text-align: right;">收文编号：正中办【2024】744号
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="width: 65px;">来文部门</td>
                                        <td></td>
                                        <td style="width: 65px;">来文字号</td>
                                        <td></td>
                                        <td style="width: 65px;">接收时间</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 65px;">来文标题</td>
                                        <td colspan="7"></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 65px;text-align: center;">党委书记批示</td>
                                        <td colspan="7"></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 65px;">校长批示</td>
                                        <td colspan="7"></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 65px;text-align: center;">办公室拟办意见</td>
                                        <td colspan="2"></td>
                                        <td style="width: 85px;text-align: center;">主办处室签收</td>
                                        <td colspan="2"></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 65px;">落实结果</td>
                                        <td colspan="7"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="7" style="height: 65px;">接件人：任海军</td>
                                    </tr>
                                </tbody>
                            </table>
                        <!-- </el-watermark> -->
                    </div>
                </div>

                <div class="btn_box">
                    <button class="close" @click="clear">取消</button>
                    <button class="okbtn" @click="print">打印</button>
                </div>
            </div>
        </div>
    </myDialog>
</template>

<script>
import { ref } from "vue";
import addImageView from "@/components/addImage.vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElLoading } from "element-plus";
import { formatTime } from "../../utils/dateFormat"
import { Close } from "@element-plus/icons-vue";
import { vxRule } from "@/utils/validator";
import myDialog from "../commonModule/myDialog.vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
    name: "AddApp",
    components: { ElForm, addImageView, ElMessage, Close, myDialog, ElLoading },
    setup() {
        return {
            locale: zhCn,
        }
    },
    data() {
        return {
            dialogFormVisible: ref(false),
            popupFlag: false,
            formLabelWidth: "120px",
            files: [],

            addFileForm: {
                id: "",
                documentTitle: "",
                documentNumber: "",
                department: "",
                receivedTime: "",
                coordinator: "",
                mainOffice: "",
                cooperatingDepartment: "",
                documentDescription: "",
                filePath: "",
            },

        };
    },
    mounted() {
        this.user = JSON.parse(sessionStorage.getItem('user'))
    },

    methods: {
        queryById(id) {
            httpService("/javaApi/docDocuments/queryById", { id: id }, "get").then((data) => {
                this.addFileForm = data
                this.checkedTeacher1 = this.addFileForm.coordinator.split(",")
                if (this.addFileForm.mainOffice) {
                    this.checkedDepart1 = this.addFileForm.mainOffice.split(",")
                } else {
                    this.checkedDepart1 = []
                }
                if (this.addFileForm.cooperatingDepartment) {
                    this.checkedDepart2 = this.addFileForm.cooperatingDepartment.split(",")
                } else {
                    this.checkedDepart2 = []
                }
                if (this.addFileForm.filePath) {
                    this.fileList = this.addFileForm.filePath.split(',').map(item => {
                        return {
                            url: item,
                            fileName: item.split(/_(.*)/)[1],
                            suffix: item.split(".")[1],
                        }
                    })
                }
                const buttonElement = this.$refs.departmentSelect.$el;
                if (this.checkedDepart1.length > 0 && buttonElement) {
                    buttonElement.classList.add('select2');
                }
                const buttonElement1 = this.$refs.departmentSelect1.$el;
                if (this.checkedDepart2.length > 0 && buttonElement1) {
                    buttonElement1.classList.add('select2');
                }
            });
        },

        closeHandle() {
            this.popupFlag = false
            this.clear()
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },

        clear() {
            this.dialogFormVisible = false;
            this.popupFlag = false

        },

        print() {

            const printContent = document.getElementById('print-area').innerHTML;
            // console.log(printContent);
            const WinPrint = window.open('', '', 'width=800,height=600');
            WinPrint.document.write('<html><head><title>Print</title>');
            WinPrint.document.write(
                `<style>@media print {
                     @page { margin: 0;  } 
                     table { border-collapse: collapse; width: 80vw;height:76vh; margin:8vh 10vw 0 10vw; } 
                     th, td { border: 1px solid black; padding: 8px; text-align: left; } 
                     th { background-color: #f2f2f2; } }
                     .watermark {
                position: absolute; 
                left: 0; 
                top: 0; 
                width: 100%; 
                height: 100%; 
                pointer-events: none; 
                color: #000; 
                font-size: 15px; 
                transform: rotate(-45deg);
                opacity: 0.2; /* Adjust the opacity */
            }
                     </style> 
                     `);
            WinPrint.document.write('</head><body>');
            WinPrint.document.write(printContent);
            WinPrint.document.write('</body></html>');
            WinPrint.document.close();
            WinPrint.print();
            WinPrint.close();




        },



    }

};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.main {
    width: 500px;
    /* height:70vh; */
    background-color: #fff;
    border-radius: 5px;
    padding: 15px 15px 30px;
}

.header {
    justify-content: space-between;
    margin-bottom: 30px;
}

.header .el-icon {
    /* margin-right: 20px; */
}

.title_box {
    color: #000;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 1px;
}

#printMain {
    width: 500px;
    height: 700px;

}

.review-table {
    width: 100%;
    height: 70vh;
    border-collapse: collapse;
}

.review-table th,
.review-table td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
}

.review-table .title {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

.review-table .doc-number {
    text-align: right;
    font-size: 14px;
}

.review-table .signing-office {
    text-align: center;
    font-weight: bold;
}

.review-table td {
    height: 50px;
}

.btn_box {
    /* margin-top: 30px; */
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.close {
    float: right;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #007EFF;
    color: #007EFF;
}

.okbtn {
    float: right;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    background-color: #007EFF;
    border: none;
    color: #fff;
}
</style>